<template>
	<view >
		<view class="tabbar"></view>
		<uni-nav-bar  left-icon="left-nav"  title="父母学堂" @clickLeft="back" />
		<view class="content display-flex flex-column" >
			<view class="top-box">
				<text v-for="(item,index) in selectData" :key='index' :class="on == index ? 'pri' : 'pub'" @click="choose(index)">{{item}}</text>
			</view>
			
			<view class="margin-top-15 know-shadow" v-for="(know,knowIndex) in knowList" :key="knowIndex">
				<view  class="know-title bg-red-light">{{know.type}}</view>
				<view class="display-flex flex-column bg-white ">
					<view class="display-flex flex-column ">
						<!-- <view class="small-title display-flex align-center">
							<image class="img" src="../../../static/img/dangao.png"></image>
							<text>单纯疱疹病毒</text>
						</view> -->
						<view class="display-flex white-normal flex-wrap padding-lr-10">
							<view class="know-card text-bg-red" v-for="(name,nameIndex) in know.typeList" :key="nameIndex" @click="getInfo(name)">
								<text>{{name}}</text>
							</view>
						</view>
					</view>
					<view></view>
				</view>
			</view>
			
			
			
			
			<!-- <no-data v-if="!albumList || albumList.length == 0"></no-data> -->
		</view>
	</view>
</template>

<script>
	import Header from "@/pages/component/head-top.vue";
	import uniNavbar from '@/components/uni-nav-bar/uni-nav-bar.vue'
	import apis from "@/api"
	
	export default {
		components:{
			uniNavbar
		},
		data() {
			return {
				titleBgColor:['bg-blue-light','bg-red-light','bg-green-light'],
				textBgColor:['text-bg-blue','text-bg-red','text-bg-green'],
				header_title:"百科知识 ",
				parent_name:"尊敬的",
				header_content:"科学根据宝宝当前月龄进行学习～",
				categoryList:[],
				knowList:[],
				albumList:[],
				categoryId:0,
				page:0,
				total:0,
				userInfo:'',
				currentCustomer:'',
				customer_name:'',
				on: 0,
				selectType:1,
				selectData: ['新生儿', '0-1岁', '1-3岁','3-6岁']
			}
		},
		filters:{
			defaultImg(val){
				if(!val){
					return 'https://storage.ganorglobal.com/miniapp-service/static/course_icon.jpg'
				}
			}
		},
		onLoad(){
			
			
			
			this.getKnowLedgeList();
		},
		onShow() {
			
			// const ledgeList = require('./data.js')
			
			// console.log(ledgeList)
			// if (typeof this.$mp.page.getTabBar === 'function' && this.$mp.page.getTabBar()) {
			// 	this.$mp.page.getTabBar().setData({
			// 	  tabbarIndex: 2
			// 	})
			//  };
			// this.userInfo = getApp().globalData.userInfo;
			// this.currentCustomer = getApp().globalData.currentCustomer;
			// this.customer_name = this.currentCustomer.stu_name
		},
		//下拉刷新
		onReachBottom(){
			
		},
		methods: {
			back() {
				uni.navigateBack({
					delta: 1
				});
			},
			getKnowLedgeList() {
				const ledgeList = require('./data.js')
				this.knowList = ledgeList.default.data
				// console.log(this.knowList)
				return
				let  args = {
					type:this.selectType
				}
				this.common.http.request('/child/wiki/typeList','post',args,res=>{
					if(res.data.code == 0){
						if(res.data.data.length> 0) {
							this.knowList = res.data.data
						}
					}
				})
			},
			goDetails(url) {
				uni.navigateTo({
					url:url
				})
			},
			getInfo (name) {
				uni.navigateTo({
					url:'./know-detail?name=' + name
				})
			},
			choose(index) {
				this.on = index
				this.selectType = index + 1
				this.getKnowLedgeList()
			},
			getAlbumList(){
				this.albumList = this.ledge
				return
				this.page++
				const args = {
					category_id:this.categoryId,
					page:this.page,
					limit:15
				}
				uni.showToast({
					icon:'none',
					title:'加载中请稍后'
				})
				this.common.http.request(apis.albumList,'post',args,res=>{
					uni.hideToast()
					if(res.data.code == 0){
						this.total = res.data.data.total
						if(this.albumList.length){
							this.albumList = [this.albumList,res.data.data.list].flat()
						}else{
							this.albumList = res.data.data.list
						}
					}
				})
			},
			goto(albumId){
				uni.navigateTo({
					url:'../course/course?albumId=' + albumId
				})
			}
		}
		
	}
</script>

<style lang="scss" scoped>
	
	.tabbar {
		height: var(--status-bar-height);
		width: 100%;
		background-color: white;
	}
	.bg-blue-light {
		background-color: #64B7A5;
	}
	.text-bg-blue {
		background-color: #F2FCFD;
	}
	.bg-white {
		background-color: #fefefe;
	}
	.bg-red-light {
		background-color: #FBC7B1;
	}
	.text-bg-red {
		background-color: #FEF8F0;
	}
	
	.bg-green-light {
		background-color: #8DEF9D;
	}
	.text-bg-green {
		background-color: #E7FFEB;
	}
	.content{
		width: 100vw;
		box-sizing: border-box;
		padding: 30rpx;
		margin-bottom: 120rpx;
		.know-shadow {
			border-radius: 20rpx;
			box-shadow:0 0 10rpx rgba(214, 220, 240, 0.5);
			padding-bottom: 20rpx;
		}
		.type-card {
			width: 210rpx;
			height: 100rpx;
			border-radius: 10rpx;
			background-color: #fff;
			box-shadow:0 0 10rpx rgba(214, 220, 240, 0.5);
			.title {
				color: #000000;
				font-size: 26rpx;
				line-height: 26rpx;
				margin-left: 10rpx;
			}
			.img {
				width: 48rpx;
				height: 48rpx;
			}
		}
		.small-title {
			margin: 49rpx 0 30rpx 20rpx;
			.img {
				width: 36rpx;
				height: 36rpx;
				margin-right: 10rpx;
			}
		}
		.know-title {
			width: 100%;
			height: 100rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #FFFFFF;
			border-top-right-radius: 20rpx;
			border-top-left-radius: 20rpx;
			font-size: 32rpx;
			font-weight: bold;
		}
		.know-card {
		
			text-align: center;
			font-size: 26rpx;
			line-height: 30rpx;
			width: 200rpx;
			height: 88rpx;
			border-radius: 4rpx;
			margin-right: 15rpx;
			margin-top: 20rpx;
			padding: 20rpx 10rpx;
			overflow: hidden;
			display: -webkit-box;
			text-overflow: ellipsis;
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical;
			white-space: normal;
			
			text {
				word-wrap: break-word;
				word-break: normal;
				width: 100%;
			}
		}
		.top-box {
			display: flex;
			margin-top: 30rpx;
			.pub {
				display: block;
				font-size: 13px;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: rgba(204, 204, 204, 1);
				width: 80px;
				height: 30px;
				text-align: center;
				line-height: 30px;
			}
		
			.pri {
				display: block;
				font-size: 13px;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
				background: #64B7A5;
				border-radius: 15px;
				width: 80px;
				height: 30px;
				text-align: center;
				box-shadow: 0px 3px 0px -1px #64B7A5;
				line-height: 30px;
			}
		
		}
	}


</style>
